<template>
  <div class="coupon-container container">
    <navbar>
      优惠券
      <div class="tabs" slot="right">
        <div class="tab-item" :class="{active: query.status == 1}" @click="changeTab(1)">未使用</div>
        <div class="tab-item" :class="{active: query.status == 2}" @click="changeTab(2)">已使用</div>
        <div class="tab-item" :class="{active: query.status == 3}" @click="changeTab(3)">已过期</div>
      </div>
    </navbar>
    <div class="body mt-25">
      <Spin v-if="loading" fix/>
      <div class="lists-body">
        <div class="lists">
          <div :class="['item', 'item-'+query.status]" v-for="(item, index) in list" :key="index">
            <div class="card">
              <div class="left">
                <div class="money">
                  <span>{{ item.title }}</span>{{ [1, 5].indexOf(item.type) >= 0 ? '元' : '折' }}
                </div>
                <div class="min-money" v-if="item.type == 1">
                  <template v-if="item.conditionMoney > 0">充{{item.conditionMoney}}可用</template>
                  <template v-else>无门槛</template>
                </div>
              </div>
              <div :class="['right', 'type-'+item.type]">
                <div class="name">
                  <div>{{ item.name }}</div>
                  <div class="desc mt-5" v-if="item.startTime">{{ item.startTime }} - {{ item.endTime }}</div>
                </div>
                <div class="desc"><span>{{ item.remark }}</span> </div>
                <template  v-if="item.type == 2 && item.isSelf == 2">
                  <img src="@/assets/images/coupon/icon-giving.png" class="giving-icon" v-if="query.status == 1"/>
                  <img src="@/assets/images/coupon/icon-giving-d.png" class="giving-icon" v-else/>
                </template>
                <div class="give-btn" v-if="item.canGiven == 1" @click="giving(item)">赠送</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lists-page tc mt-20" v-if="total">
        <Page :total="total"
              :current.sync="query.pageNum"
              :page-size="query.pageSize"
              @on-change="getList"/>
      </div>
    </div>
    <giveFriend v-model="model.show" source="1" :coupon="model.data" @success="refresh"/>
  </div>
</template>
<script>
import {getCouponList, givenOnCoupon, givingRegular} from "@/api/wallet";
import {mapGetters} from "vuex";
import {checkCardNumber, formatAmount, starCardNumber} from "@/common/utils";
import {searchMember} from "@/api/member";
import {decryptByDESModeCBC} from "@/common/utils/des";
import giveFriend from "@/components/giveFriend/index.vue";
export default {
  name: "index",
  props: {
    value: true,
  },
  components: {
    giveFriend
  },
  data() {
    return {
      couponType: {
        1: '充值券',
        2: '饮品券',
        3: '权益卡',
        4: '餐食券',
        5: '上网券',
      },
      query: {
        pageNum: 1,
        pageSize: 20,
        status: 1
      },
      list: [],
      total: 0,
      loading: false,
      finished: false,

      model: {
        show: false,
        data: {}
      },
    }
  },
  computed: {
    ...mapGetters(['memberId']),
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  mounted() {
  },
  methods: {
    changeTab(status) {
      this.query.status = status
      this.refresh()
    },
    refresh() {
      this.query.pageNum = 1;
      this.list = []
      this.loading = false
      this.getList()
    },
    getList() {
      if (!this.memberId) return
      this.query.memberId = this.memberId
      this.loading = true
      getCouponList(this.query).then(res => {
        this.list = res.rows.map(item => {
          item.title = item.title.replace('折', '').replace('￥', '')
          item.title = formatAmount(item.title, 2, false, false)
          item.canGiven = this.query.status == 1 ? item.canGiven : 2
          return item
        })
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    getRegular() {
      if (!this.memberId) return
      givingRegular({memberId: this.memberId}).then(res => {
        this.oftenMemeber = res.data.list
      })
    },
    giving(item) {
      this.model = {
        show: true,
        data: item
      }
      /*this.getRegular()
      this.form = {
        fromMemberId: this.memberId,
        cardType: item.cardType,
        name: item.name,
        title: item.title,
        memberCouponId: item.couponId,
        toMemberNumber: '',
        type: item.type
      }
      this.givingShow = true*/
    },
    givingMember(item) {
      this.form.toMemberName = item.name
      this.form.toMemberNumber = item.memberNumber
      this.confirmShow = true
    },
    confirmGive() {
      if (checkCardNumber(this.form.toMemberNumber)){
        this.$Message.error('请输入正确的卡号')
        return
      }
      searchMember({memberNumber: this.form.toMemberNumber}).then(res => {
        if (res.code != 200) return
        let data = JSON.parse(decryptByDESModeCBC(res.msg))
        if (data.memberId == this.memberId) {
          this.$Message.error('不能赠送自己')
          return
        }
        this.form.toMemberName = data.name
        this.confirmShow = true
      })
    },
    doGiving() {
      if (this.givingLoading) return
      this.givingLoading = true
      givenOnCoupon(this.form).then(res => {
        if (res.code != 200) return
        this.$Message.success('赠送成功')
        this.givingShow = false
        this.confirmShow = false
        this.refresh()
      }).finally(() => {
        this.givingLoading = false
      })
    }
  },
  created() {
    this.refresh()
  }
}
</script>


<style lang="scss">
@import "index";
</style>
